<template>
  <div class="container">
    <div class="header">设备月度稼动率</div>
    <div class="echart-container">
      <div ref="echartsBox" class="echarts-box"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'
const colors = [
  '#24dcf7',
  '#ffdb15',
  '#2B7CB5',
  '#FF6271',
  '#22B2CB',
  '#10e8aa',
  'rgb(233,156,187)',
  'rgb(241,213,100)',
  'rgb(116,216,243)',
  'rgb(55,182,255)',
]
var datas = [
  [
    { name: '数据1', value: 5.6 },
    { name: '数据2', value: 1 },
    { name: '数据3', value: 0.8 },
    { name: '数据4', value: 0.5 },
    { name: '数据5', value: 0.5 },
    { name: '其它', value: 3.8 },
  ],
  [
    { name: '数据1', value: 3.8 },
    { name: '数据2', value: 2.3 },
    { name: '数据3', value: 2.2 },
    { name: '数据4', value: 1.3 },
    { name: '数据5', value: 1.2 },
    { name: '其它', value: 5.7 },
  ],
]

datas.map(data => {
  data.map((item, idx) => {
    item.label = {
      formatter: '{name|{c}}\n{time|{b}}',
      //alignTo: 'edge',
      minMargin: 5,
      edgeDistance: 5,
      lineHeight: 15,
      rich: {
        name: {
          fontSize: 13,
          lineHeight: '20',
          color: colors[idx],
        },
        time: {
          fontSize: 13,
          color: '#eee',
        },
      },
    }
  })
})
const option = {
  color: colors,
  series: datas.map(function (data, idx) {
    var left = idx * 50
    return {
      type: 'pie',
      radius: [40, 60],
      top: -25,
      left: left + '%',
      width: '50%',
      itemStyle: {
        borderColor: '#082d58',
        borderWidth: 2,
        borderRadius: 4,
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80,
      },
      // labelLayout: function (params) {
      //   const isLeft = params.labelRect.x < myChart.getWidth() / 2;
      //   const points = params.labelLinePoints;
      //   // Update the end point.
      //   points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
      //   return {
      //     labelLinePoints: points,
      //   };
      // },
      data: data,
    }
  }),
}

// 在Vue3中，getCurrentInstance()可以用来获取当前组件实例
const { proxy } = getCurrentInstance()
// 获取echart挂载的DOM节点
const echartsBox = ref()
// echartsf弹窗出现
function echartInit() {
  //nextTick后再调用，不然会报错
  nextTick(() => {
    // echarts初始化
    let myChart = proxy.$echarts.init(echartsBox.value)

    option && myChart.setOption(option)

    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  })
}
echartInit()
</script>
<style lang="less" scoped>
@import url(./container.less);
</style>
